<template>
  <div id="dialogVideoDetail">
    <el-dialog
      class="about-set"
      :title="dialogData.title"
      :visible.sync="dialogData.isShow"
      width="700px"
      :before-close="labelHandleClose"
    >
      <div v-loading="loading" class="task-detail-con">
        <div class="detail-left" v-if="formData.user">
          <img :src="formData.user.avatar" alt="头像" />
        </div>
        <div class="detail-left" v-else-if="formData.avatar">
          <img :src="formData.avatar" alt="头像" />
        </div>
        <div class="detail-right">
          <dl>
            <dt>
              <template v-if="formData.user">
                {{ formData.user.nickname || formData.user.name || formData.user.nickName}}
              </template>

              <template v-else-if="formData.nickname">
                {{ formData.nickname }}
              </template>
              
              <template v-if="dialogData.type === 'jobDetail' || dialogData.type === 'JOB'">
                <strong class="detail-top">
                  {{ formData.categoryId | filterName('collegeType') }}</strong>
                <span>;</span>

                <strong class="detail-top">{{ getLevel(formData.score) }}</strong>

                <strong class="detail-top">
                  {{ formData.courseGrade === 'OTHER' || formData.courseGrade === '' ? '其他' : formData.courseGrade }}
                </strong>
              </template>
            </dt>
            <dd>
              <span v-if="formData.user">{{ formData.user.dpAccount }}</span>
              <span v-else-if="formData.dpAccount">{{ formData.dpAccount }}</span>

              <span>创建时间：
                <span>
                  {{ formData.submitTime || formData.jobSubmitTime || formData.createdDate }}
                </span>
              </span>

              <span v-if="dialogData.type === 'jobDetail' || dialogData.type === 'JOB'">批改时间：{{ formData.approvedTime | timeToTime }}</span>
            </dd>
            <dd>
              <span v-if="dialogData.type === 'workDetail' || dialogData.type === 'WORKS' || dialogData.type === 'WORK'" v-html="formData.workContent"></span>
              <span v-else-if="dialogData.type === 'jobDetail' || dialogData.type === 'JOB'" v-html="formData.jobContent"></span>
              <span v-else-if="dialogData.type === 'lifDetail'" v-html="formData.content"></span>
              <span v-else-if="dialogData.type === 'circleDetail'" v-html="formData.content"></span>
              <span v-else-if="dialogData.type === 'topicDetail'" v-html="formData.content"></span>
            </dd>

            <template v-if="dialogData.type === 'jobDetail' || dialogData.type === 'JOB'">
              <dd> <i class="el-icon-link"></i> {{ formData.taskTitle }} </dd>

              <dd class="as-code-number">
                作业码：{{ formData.identCode || formData.identificationCode }}
              </dd>
            </template>

          </dl>

          <div v-if="showType === 'VIDEO'" class="video-face-box">
            <videoFace :vid="vid"></videoFace>
          </div>

          <div v-else class="pic-box-show" :class="imgList.length > 1 ? '' : 'single-pic'">
            <showImg v-if="imgList.length > 0" :img-list="imgList"></showImg>
          </div>
          
          <ul class="foot-list">
            <li v-if="dialogData.type === 'workDetail' || dialogData.type === 'WORK' || dialogData.type === 'WORKS'">
              评论{{ formData.commentNum }}
            </li>

            <li v-if="dialogData.type === 'jobDetail' || dialogData.type === 'JOB'">
              评论{{ formData.commentAmount }}
            </li>

            <li v-if="dialogData.type === 'lifDetail' || dialogData.type === 'circleDetail' || dialogData.type === 'topicDetail'">
              评论{{ formData.commentCount }}
            </li>

            <li v-if="dialogData.type === 'workDetail' || dialogData.type === 'WORK' || dialogData.type === 'WORKS'">
              点赞{{ formData.praiseNumber }}
            </li>
            
            <li v-if="dialogData.type === 'jobDetail' || dialogData.type === 'JOB'">
              点赞  {{ formData.praiseAmount }}
            </li>
            <li v-if="dialogData.type === 'lifDetail' || dialogData.type === 'circleDetail' || dialogData.type === 'topicDetail'">
              点赞 {{ formData.likeCount }}
            </li>

            <li>
              分享 {{`${formData.realShareAmount ? formData.realShareAmount : 0 + formData.virtualShareAmount ? formData.virtualShareAmount : 0 }` || formData.shareAmount }}
            </li>

            <template>
              <li v-if="dialogData.type === 'workDetail' || dialogData.type === 'WORKS' || dialogData.type === 'WORK' || dialogData.type === 'JOB'">
                最新编辑者
                {{ formData.newOperName ? formData.newOperName : '-' }}
              </li>
              <li v-if="dialogData.type === 'jobDetail'">
                最新编辑者
                {{ name ? name : '-' }}
              </li>
              <li v-if="dialogData.type === 'lifDetail' || dialogData.type === 'circleDetail' || dialogData.type === 'topicDetail'">
                最新编辑者
                {{ LatestEditor ? LatestEditor : '-' }}
              </li>
            </template>
          </ul>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="cancelLabel">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import videoFace from '@common/videoFace'
import showImg from '@common/showImg'
import { sysNormalDisable } from '@utils/dictionariesFunc'

export default {
  name: 'DialogVideoDetail',
  msg: '视频详情-弹窗--公共组件',
  components: {
    videoFace,
    showImg
  },
  props: ['dialogData'],
  data() {
    return {
      id: '',
      loading: false,
      LatestEditor: '', // 最新编辑者
      showType: '', // 显示类型，作品内类-图文 【TEXT】 小视频【VIDEO】
      formData: {},
      vid: '',
      imgList: [],
      name: '',
      collegeList: []
    }
  },
  mounted() {
    this.id = this.dialogData.id
    this.name = this.dialogData.peopleApprovedUserName
    this.getDetail()
    switch (this.dialogData.type) {
      case 'jobDetail':
      case 'JOB':
        this.getCollege()
        break
      case 'lifDetail':
        this.getLatest()
        break
      case 'circleDetail':
        this.getCircleLatest()
        break
      case 'topicDetail':
        this.getTopicLatest()
        break
      default:
        break
    }
  },
  methods: {
    /* 获取详情 */
    getDetail() {
      this.loading = true
      let url = ''
      switch (this.dialogData.type) {
        case 'workDetail':
          url = `/works/${this.dialogData.id}`
          break
        case 'jobDetail':
        case 'JOB':
          url = `/homes/reviews/${this.dialogData.id}`
          break
        case 'lifDetail':
          url = `/lifes/${this.dialogData.lifeId}`
          break
        case 'circleDetail':
          url = `/circles/posts/${this.dialogData.circleId}`
          break
        case 'topicDetail':
          url = `/channel/topics/posts/${this.dialogData.topicId}`
          break
        case 'WORK':
        case 'WORKS':
          url = `/works/${this.dialogData.id}`
          break
        default:
          break
      }
      this.pubRequire('get', url, '', (response) => {
        let data = response
        this.formData = data
        this.showType = data.workType || data.jobType || data.type || data.contentType
        if (this.showType === 'TEXT') {
          if (this.dialogData.type === 'jobDetail') {
            let s = data.jobImagesAddress
            this.imgList = s.split(',')
          } else {
            if(this.dialogData.type === 'circleDetail' || this.dialogData.type === 'topicDetail') {
              this.imgList = data.imgs
            } else {
              this.getImgList(JSON.parse(data.imgInfo))
            }
          }
        } else {
          if(data.video) {
            this.vid = data.video.vid
          } else {
            this.vid = data.video || data.vid || data.videoId
          }
        }
        this.loading = false
      },(response) => {
        this.loading = false
        this.$message({
          message: response.message,
          type: 'warning'
        })
      })
    },
    // 获取最新编辑者接口
    getLatest() {
      this.loading = true
      let url = `/lifes/${this.dialogData.lifeId}/latest-editor`
      this.pubRequire('get', url, '', (response) => {
        let date = response
        this.LatestEditor = date
      })
    },
    // 获取圈子最新编辑者
    getCircleLatest() {
      this.loading = true
      let url = `/circles/posts/${this.dialogData.circleId}/latest-editor`
      this.pubRequire('get', url, '', (response) => {
        let date = response
        this.LatestEditor = date
      })
    },
    // 获取话题最新编辑者
    getTopicLatest() {
      this.loading = true
      let url = `/channel/topics/posts/${this.dialogData.topicId}/latest-editor`
      this.pubRequire('get', url, '', (response) => {
        let date = response
        this.LatestEditor = date
      })
    },
    /* 获取图片列表 */
    getImgList(ary) {
      let empty = []
      ary.forEach((item) => {
        empty.push(item.url)
      })
      this.imgList = [...empty]
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.dialogData.isShow = false
    },
    async getCollege() {
      let collegeList = await sysNormalDisable('sys_college', 'collegeType')
      this.collegeList = collegeList
    }
  },
  computed: {
    getLevel() {
      return function(score) {
        switch (score) {
          case '90':
            return '优'
            break
          case '80':
            return '良'
            break
          case '70':
            return '中'
            break
          case '60':
            return '差'
            break
          case '0':
            return '未打分'
            break
        }
      }
    }
  }
}
</script>

<style lang="less">
#dialogVideoDetail {
  .task-detail-con {
    display: table;
    color: #333;
    margin: 0 20px;

    .detail-left,
    .detail-right {
      display: table-cell;
      .detail-top {
        font-weight: 400;
        border: 1px solid #ccc;
        padding: 2px 5px;
        margin: 0 5px;
        border-radius: 2px;
      }
      .as-code-number {
        color: #ccc;
      }
    }

    .detail-left {
      width: 80px;
      vertical-align: top;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    .detail-right {
      img {
        max-width: 100%;
      }
      .pic-box-show {
        width: 504px;
        height: 300px;

        &.single-pic {
          height: 200px;
        }
      }
      .video-face-box {
        width: 504px;
        height: 380px;
      }
      dl {
        margin-bottom: 20px;

        dt {
          font-size: 15px;
          line-height: 30px;
          margin-bottom: 10px;
          font-weight: bold;
        }

        dd {
          font-size: 14px;
          line-height: 22px;
          margin-bottom: 8px;

          &:nth-of-type(1) {
            span {
              margin-right: 7px;
              display: inline-block;
            }
          }
        }
      }

      ul.foot-list {
        padding: 20px 0 15px;
        overflow: hidden;

        li {
          float: left;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
